<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeTab = ref<string>(route.query.mode as string || '0')

onMounted(() => {
  console.log('start', activeTab.value)
})
watch(
  () => activeTab.value,
  async newId => {
    // userData.value = await fetchUser(newId)
    console.log(newId)
  }
)
</script>
<template>
  <div class="order-list">
    <!-- 顶部操作栏 -->
    <van-nav-bar
      :left-arrow="true"
      @click-left="$router.back()"
      fixed placeholder>
      <template #title>
        <van-tabs v-model:active="activeTab">
          <van-tab title="全部订单" name="0" />
          <van-tab title="待付款" name="1" />
          <van-tab title="待发货" name="2" />
          <van-tab title="待收货" name="3" />
        </van-tabs>
      </template>
    </van-nav-bar>
    <!-- 订单列表展示 -->
    <div>订单列表</div>
  </div>
</template>
<style lang="scss" scoped>
.order-list {
}
</style>